<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"
    />
</head>
<style lang="css">
    .container {
        margin: 10px;
    }

    img {
        width: 32px;
        height: 32px;
    }
</style>

<body>
    <p>封装一个js插件,功能：设置dom元素的宽高和背景色</p>
    <p>特点1：传入参数自动覆盖默认参数</p>
    <p>特点2：使用方法调用，而非new XXX()调用方式</p>
    <p>特点2：链式调用，可扩展插件</p>
    <div class="container">
        <div>
            <img src="./200k.png" alt="1">
        </div>
        <div>
            <img src="200k.png" alt="2">
        </div>
    </div>
    <div class="container2">
        container2
    </div>
    <script type="text/javascript">
        ; (function (win) { // 仿照jquery封装方式之 非new模式方法调用
            var defaultOption = {
                el: document.querySelector('.container'),
                width: 600,
                height: 600
            }
            var plugin = function (options) {
                return new plugin.prototype.init(options)
            }

            plugin.fn = plugin.prototype = {
                init: function (options) {
                    this.value = 1
                    this.el = options.el || defaultOption.el // 单独取出el便于使用
                    this.options = options || defaultOption
                    this.initConfig(options)
                    return this
                },
                initConfig: function (options) {
                    this.el.style.width = options.width + 'px'
                    this.el.style.height = options.width + 'px'
                    this.el.style.backgroundColor = 'red'
                },
                add: function (param1, param2) { // 加
                    return param1 + param2
                },
                sub: function (param1, param2) { // 减
                    return param1 - param2
                },
                mul: function (param1, param2) { // 乘
                    return param1 * param2
                },
                div: function (param1, param2) { // 除
                    return param1 / param2
                },
                sur: function (param1, param2) { // 求余
                    return param1 % param2
                },
                chainone: function (options) { // 链式调用
                    console.log('chainone')
                    return this //返回当前方法
                },
                chaitwo: function (options) { // 链式调用
                    console.log('chaitwo')
                    return this //返回当前方法
                }
            }
            plugin.extend = plugin.fn.extend = function () {
                // 插件扩展代码，未完
            }
            plugin.fn.init.prototype = plugin.fn // 分离作用域，同时保证创建的实例又可以调用原型继承的方法

            if (typeof module !== 'undefined' && module.exports) {
                module.exports = plugin
            } else if (typeof define === 'function' && define.amd) {
                define(function () { return plugin })
            } else {
                if (!('plugin' in win)) {
                    window.plugin = plugin
                }
            }
        })(window)

        var slide = plugin({
            el: document.querySelector('.container'),
            width: 500,
            height: 400
        })
        var slide2 = plugin({
            el: document.querySelector('.container2'),
            width: 500,
            height: 400
        })

        var result1 = slide.add(1, 2)
        var result2 = slide.sub(1, 2)
        slide.chainone().chaitwo().chainone()

        console.log(result1)
        console.log(result2);


        (function (win) {
            var Ta = function (options) {
                return new Ta.prototype.init(options)
            }
            Ta.fn = Ta.prototype = {
                init: function (options) {
                    this.name = 'Ta'
                    this.version = '0.01'
                    this.options = options || ''
                    this.utils = new utils()
                    return this
                }
            }
            Ta.fn.init.prototype = Ta.fn // 分离作用域，同时保证创建的实例又可以调用原型继承的方法

            var utils = function () {

            }
            utils.prototype = {
                log: function (contenxt) {
                    console.log(contenxt)
                }
            }
            if (typeof module !== 'undefined' && module.exports) {
                module.exports = Ta
            } else if (typeof define === 'function' && define.amd) {
                define(function () { return Ta })
            } else {
                if (!('Ta' in win)) {
                    window.Ta = Ta
                }
            }
        })(window)
    </script>

</body>

</html>